<template>
	<view class="content"> 
		
		
		<!-- 空列表 -->
		
		<view v-if="empty == 'isempty'" class="empty">
            <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">

            </u-empty>
        </view>

	

		<u-sticky offset-top="1">
			<view class="tabs">
			<!-- 提现的状态卡 -->
			<u-tabs :list="statuslist" @click="selectRecord"></u-tabs>
		</view>
		</u-sticky>
		

		<view class="data">
			<view class="data-content" v-for="item  in recordlist" :key="item.id">
				<view class="title">
					{{ item.empnickname_text }}<span class="typeStyle">({{ item.type_text }})</span>
				</view>
				
				<view class="math">
					+￥{{ item.commission }}
				</view>
				<view class="time">
				{{ item.createtime_text }}
				</view>
			</view>
	
		</view>

			<!-- 消息提醒 -->
			<u-toast ref="notice"></u-toast>
	</view>

	
</template>

<script>
export default {
	onLoad(option) {

		this.auth = this.$u.auth.check()


		this.GetStatusList()//业绩类型
		this.EmpTichengRecord()//提现记录
	},
	created() {
		 setInterval(() => {

			this.$u.count.check()
			this.GetStatusList()//业绩类型

		}, 15000);

	},

	data() {
		return {
			title:'提现金额',

			page:1,
			empty:"",
			type:"",
			balance: 0.00,//余额
			income: 0.00,//收入
			price:"",//提现金额
			statuslist: [],
			recordlist:[],
			auth: {},
	};
	},

	methods: {

		selectRecord(e)
		{
			this.recordlist = []
			this.type = e.type

			this.EmpTichengRecord()
		},
		// 提现的状态卡
		async GetStatusList()
		{
			let data = {
				adminid:this.auth.id,
			}

			let result = await this.$u.api.admin.statuslist(data)
			if(result.code)
			{
				this.statuslist = result.data
			}
		},
		async EmpTichengRecord()
		{
			let data = {
				adminid:this.auth.id,
				type:this.type
				
			}

			let result = await this.$u.api.admin.emptclist(data)
			
			{
				if(result.data.length>0)
				{
					this.recordlist = result.data
					
				}else
				{
					this.empty = "isempty"
				}
			}
		},
	
	},
	
}
</script>

<style lang="scss">
page {
	background-color: #f5f6f7;
}

.content{
	position: relative;
}
.empty{
	position: absolute;
	left: 0;
	width: 100%;
	top: 350px;
}
.top-card {
	width: 90%;
	height: 450rpx;
	background-color: #fff;
	margin: 30rpx auto;
	border-radius: 30rpx;
	/* 设置统一的 border-radius 值 */
	border-bottom-left-radius: 0;
	/* 设置底部左侧边的圆角为 0 */
	border-bottom-right-radius: 0;

	/* 设置底部右侧边的圆角为 0 */
	.top {
		height: 150rpx;
		background-image: url('https://luxuries.h1668.com/uploads/20230801/bf08d7916a47a45590e75af305965bbf.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 30rpx;
		/* 设置统一的 border-radius 值 */
		border-bottom-left-radius: 0;
		/* 设置底部左侧边的圆角为 0 */
		border-bottom-right-radius: 0;
		/* 设置底部右侧边的圆角为 0 */
		display: flex;

		.top-left,
		.top-right {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			color: #f8e3c3;
		}

		.top-left {
			font-size: 1.4rem;
			margin-left: 20rpx;
		}

		.top-right {
			font-size: 2rem;
			margin-left: 5rpx;
		}
	}

	.operate {
		height: 80rpx;
		display: flex;

		.operate-left,
		.operate-right {
			width: 25%;
			height: 80rpx;
			
			text-align: center;
		
		}
	}

	.content {
		display: flex;
		height: 200rpx;
		

		.content-left {
			width: 50%;
			height: 100%;

			.left-title {
				font-size: 1.25rem;
				margin-top: 50rpx;
				text-align: center;
			}

			.left-content {
				margin-top: 20rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: black;

				.left {
					font-size: 1.25rem;
				}

				.right {
					font-size: 1.4rem;
				}
			}
		}

		.content-right {
			width: 50%;
			height: 100%;
			padding-top: 40px;
			padding-right: 15px;

			.right-title {
				font-size: 1.25rem;
				margin-top: 50rpx;
				text-align: center;
			}

			.right-content {
				margin-top: 20rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: black;

				.left {
					font-size: 1.25rem;
				}

				.right {
					font-size: 1.4rem;
				}
			}
		}
	}
}


.tabs {
	width: 90%;
	margin: 0 auto;
}

.data {
	width: 90%;
	height: 810px;
	overflow: auto;
	border-bottom: 1px solid #eeeeee;
	margin: 0 auto;
	background-color: #f5f6f7;

	.data-content:first-child {
		margin-top: 0;
	}

	.data-content {
		background-color: #fff;
		margin-top: 10rpx;
		padding: 10rpx;

		.title {
			text-align: left;
			color: black;
			font-size: 0.9rem;
		}

		.math {
			text-align: right;
			color: black;
			font-size: 0.8rem;
		}

		.time {
			text-align: left;
			font-size: 0.9rem;
		}
		.typeStyle{
			color: rgb(86, 86, 88);
			font-size: 15px;
		}
	}
}</style>
